<template>
	<!-- 签到 -->
	<view class="signIn">
		<!-- 当前位置 -->
		<view class="currentlocation">
			<view class="currentlocation-bg">
				<image :src="imgUrl+'location1.png'" mode=""></image>
			</view>
			<view class="currentlocation-top">
				<view class="img">
					<image :src="imgUrl+'location2.png'" mode=""></image>
				</view>
				<view class="currentlocation-top-text">
					当前位置
				</view>
			</view>


			<view class="currentlocation-center">
				<text>{{currentSite.city}}</text>
			</view>
			<view class="currentlocation-bottom">
				<text>{{currentSite.district}}{{currentSite.address}}</text>
			</view>



			<u-line />
			<!-- 点击签到 -->
			<view class="currentlocation-clicksignin">
				<view class="currentlocation-clicksignin-left">
					<view @click="chooseLocation">手动设置</view>
					<u-icon name="arrow-right" color="#46D17E" size="16"></u-icon>
				</view>
				<view class="currentlocation-clicksignin-right" @tap="clickSignin">
					签到
				</view>
			</view>

		</view>
		<!-- 地图 -->
		<view class="map-loctionMap">
			<view class="locationmap-top">
				<view class="locationmap-top-left">
					服务区域(半径{{radius}}km)
				</view>
				<view class="locationmap-top-counter">
					<view class="cut" @click="cut">
						<image :src="imgUrl+'add.png'" mode=""></image>
					</view>
					<view class="num">
						{{radius}}
					</view>
					<view class="add" @click="add">
						<image :src="imgUrl+'cut.png'" mode=""></image>
					</view>
				</view>
			</view>
			<u-line />
			<view class="locationmap-map">
				<map :circles="circles" :longitude="latAndLng.lng" :scale="scale" :latitude="latAndLng.lat"
					:markers="covers" />
			</view>

		</view>

		<!-- 签到成功遮蔽层 -->
		<!-- <view class="shield" v-if="signIn" @click="clickSignin">
			<view class="img">
				<image :src="imgUrl+'qdcg.png'" mode=""></image>
			</view>

		</view> -->
	</view>
</template>

<script>
	import {
		signIn,
		getMyIndex
	} from "./api.js"
	import store from "../../store/index.js"
	export default {
		onReady() {
			if (this.$store.state.latAndLng.lat == "") {
				// this.handleLocation()
			}
		},
		onShow() {
			// 获取个人信息
			this.images()	
		},
		computed: {
			currentSite() {
				return this.$store.state.currentSite
			},
			latAndLng() {
				let latAndLngs = this.$store.state.latAndLng
				this.circles[0].latitude = latAndLngs.lat
				this.circles[0].longitude = latAndLngs.lng
				this.covers[0].latitude = latAndLngs.lat
				this.covers[0].longitude = latAndLngs.lng
				return latAndLngs
			},
		},
		data() {
			return {
				imgUrl: this.$store.state.imgUrl,

				signIn: false, //签到状态
				radius: 1, //区域半径
				latitude: 26.22,
				longitude: 111.63,
				scale: 13,
				circles: [{
					latitude: 26.22,
					longitude: 111.63,
					radius: 1000,
					strokeWidth: 2,
					color: "#FFB83C",
					fillColor: "#ffaa003c",
				}],
				covers: [{
					latitude: 26.22,
					longitude: 111.63,
					iconPath: this.$store.state.imgUrl + "dt.png",
					callout: {
						content: "",
						bgColor: "white",
						display: "ALWAYS",
						padding: "12rpx"
					},
					width: "40rpx",
					height: "40rpx"
				}]

			}
		},
		methods: {
			images(){
				let that = this
				let token = uni.getStorageSync("token")
				getMyIndex(token).then(res => {
					console.log(res,"个人信息")
					if(res.code == 1){
					this.radius = res.data.info.radius
					
					}
				})
			},
			// 选择位置
			chooseLocation() {
				this.handleLocation()
			},
			//手动设置地址
			handleLocation() {
				uni.chooseLocation({
					success: (res) => {


						let latAndLng = {}
						latAndLng.lat = res.latitude
						latAndLng.lng = res.longitude
						// let currentSite = {}
						var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
						var REGION_PROVINCE = [];
						var currentSite = {
							province: null,
							city: null,
							district: null,
							address: null
						};
					
						if (!regex.exec(res.address)) {
							regex = /^(.*?(省|自治区))(.*?)$/;
							
							REGION_PROVINCE = regex.exec(res.address);
							
							currentSite.province = REGION_PROVINCE[1];
							currentSite =this.regexAddressBean(REGION_PROVINCE[3], currentSite,res);
						} else {
							REGION_PROVINCE = regex.exec(res.address);
							currentSite.province = REGION_PROVINCE[1];
							currentSite =this.regexAddressBean(res.address, currentSite,res);
						}
						  console.log(currentSite,"1：currentSite")



					
						this.$store.dispatch("actionsChangeLatAndLng", latAndLng)
						this.$store.dispatch("actionsChangecurrentSite", currentSite)
					}
				});
			},
			regexAddressBean(address, addressBean,res) {
				var regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
				var addxress = regex.exec(address);
				addressBean.city = addxress[1];
				addressBean.district = addxress[2];
				addressBean.address = addxress[3] + "(" + res.name + ")";
				return addressBean;
				console.log(addressBean,"5：打印的5")
			},
			clickSignin() {
				if (this.signIn) {
					return this.signIn = false
				}
				let that = this
				
				signIn({
					...that.$store.state.currentSite,
					...that.$store.state.latAndLng,
					radius: this.radius
				}).then(res => {
					this.signIn = false
				}).catch(err => {
					if(err){
						uni.showToast({
						icon:"success",
						title:'签到成功'
						})
					setTimeout(function(){
						uni.navigateBack({
							delta: 2
						});
					},1000)
					}
				})
			
			},
			// 区域减
			cut() {
				if (this.radius <= 1) return false
				this.radius--

				this.circles[0].radius = 1000 * this.radius
				console.log(this.circles[0].radius,"4：this.cirles[0].reaiulds")
			},
			//区域加
			add() {
				this.radius++
				this.circles[0].radius = 1000 * this.radius
			},

		}
	}
</script>

<style lang="less">
	.signIn {
		width: 100%;
		height: 100%;

		.currentlocation {
			position: relative;
			background: #fff;
			width: 686rpx;
			height: 308rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			padding-left: 24rpx;

			.currentlocation-bg {
				position: absolute;
				right: 0;
				top: 0;
				width: 172rpx;
				height: 172rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.currentlocation-top {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;


				.img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.currentlocation-center {
				font-size: 28rpx;
				font-weight: 500;
				color: #262626;
			}

			.currentlocation-bottom {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 20rpx
			}

			.currentlocation-clicksignin {
				height: 112rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.currentlocation-clicksignin-left {
					height: 100%;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 500;
					color: #0ea07f;

					view {
						margin-top: -3rpx;
						margin-right: 10rpx;
					}
				}

				.currentlocation-clicksignin-right {
					width: 160rpx;
					height: 64rpx;
					background: #0ea07f;
					border-radius: 8rpx;
					margin-right: 24rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;

				}
			}
		}


		.map-loctionMap {
			margin: 0 auto;
			width: 686rpx;
			height: 792rpx;
			margin-top: 26rpx;
			background: #fff;


			.locationmap-top {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 96rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;

				.locationmap-top-counter {
					box-sizing: border-box;
					width: 176rpx;
					height: 56rpx;
					background: #F7F8F9;
					border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;

					.add {
						width: 28rpx;
						height: 28rpx;
						margin-top: -8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cut {
						width: 28rpx;
						height: 28rpx;
						margin-top: -30rpx;

						image {
							width: 100%;
							height: 21.4%;
						}
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}


			}

			.locationmap-map {
				box-sizing: border-box;
				padding: 24rpx 24rpx 32rpx 24rpx;
				width: 100%;
				height: 695rpx;

				map {
					width: 100%;
					height: 100%;
				}
			}
		}

		.shield {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, .6);
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				width: 379rpx;
				height: 390rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
